<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- Latest compiled and minified CSS & JS -->
    <link rel="stylesheet" media="screen" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
</head>
<body>
<div id="hd">
    <form action="" class="form-horizontal">
        <hd-Panel>
            <h1 slot="title">这是标题</h1>
            <hd-Input title="姓名" value="内容" slot="content"></hd-Input>
            <hd-Input title="年龄" value="年龄" slot="content"></hd-Input>
        </hd-Panel>
    </form>
</div>
<template id="tp">
        <div class="panel panel-default">
        	  <div class="panel-heading">
        			<h3 class="panel-title"><slot name="title"></slot></h3>
        	  </div>
        	  <div class="panel-body">
        			<slot name="content"></slot>
        	  </div>
        </div>
</template>
<template id="Input">
    <div class="form-group">
    	<label for="name" class="col-sm-2 control-label">{{title}}</label>
    	<div class="col-sm-10">
    		<input type="text" name="name" id="inputID" class="form-control" :value="value" title="" required="required" >
    	</div>
    </div>
</template>
<script>
    var hdInput={
        'template':'#Input',
        props:['title','value']
    }
    var hdPanel={
        template:'#tp'
    }
    var app=new Vue({
        el:'#hd',
        components:{
            hdPanel:hdPanel,
            hdInput:hdInput
        },
        data:{

        }
    })
</script>
</body>
</html>